<template>
  <div class="orrDeviceOperatorStatus-add-update-component">
    <el-dialog
      v-if="modelValue.visible"
      v-model="modelValue.visible"
      :title="
        !modelValue.form.id
          ? `新增${modelValue.title}`
          : `修改${modelValue.title}`
      "
      width="550px"
    >
      <div style="padding-right: 50px; padding-top: 20px">
        <el-form
          :model="modelValue.form"
          :rules="modelValue.rules"
          ref="addEditRef"
          :label-width="100"
        >
          <el-form-item label="门店编号" prop="storeNumber">
            <el-input
              placeholder="请输入门店编号"
              v-model="modelValue.form.storeNumber"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="门店名称" prop="storeName">
            <el-input
              placeholder="请输入门店名称"
              v-model="modelValue.form.storeName"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="业务日期" prop="busiDate">
            <el-input
              placeholder="请输入业务日期"
              v-model="modelValue.form.busiDate"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="物料编号" prop="materialNumber">
            <el-input
              placeholder="请输入物料编号"
              v-model="modelValue.form.materialNumber"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="物料名称" prop="materialName">
            <el-input
              placeholder="请输入物料名称"
              v-model="modelValue.form.materialName"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="总出杯数量" prop="quantity">
            <el-input
              placeholder="请输入总出杯数量"
              v-model="modelValue.form.quantity"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="稳定出杯数量" prop="stableDischargeQuantity">
            <el-input
              placeholder="请输入稳定出杯数量"
              v-model="modelValue.form.stableDischargeQuantity"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="不稳定出杯数量" prop="unStableDischargeQuantity">
            <el-input
              placeholder="请输入不稳定出杯数量"
              v-model="modelValue.form.unStableDischargeQuantity"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="稳定出杯率字符串" prop="stableDischargePct">
            <el-input
              placeholder="请输入稳定出杯率字符串"
              v-model="modelValue.form.stableDischargePct"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item
            label="并发出杯率字符串"
            prop="concurrentDischargeQuantityPct"
          >
            <el-input
              placeholder="请输入并发出杯率字符串"
              v-model="modelValue.form.concurrentDischargeQuantityPct"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="出杯间隔1数量" prop="dischargeIntervalQuantity1">
            <el-input
              placeholder="请输入出杯间隔1数量"
              v-model="modelValue.form.dischargeIntervalQuantity1"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="出杯间隔2数量" prop="dischargeIntervalQuantity2">
            <el-input
              placeholder="请输入出杯间隔2数量"
              v-model="modelValue.form.dischargeIntervalQuantity2"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="出杯间隔3数量" prop="dischargeIntervalQuantity3">
            <el-input
              placeholder="请输入出杯间隔3数量"
              v-model="modelValue.form.dischargeIntervalQuantity3"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="单次出杯数量" prop="singleDischargeQuantity">
            <el-input
              placeholder="请输入单次出杯数量"
              v-model="modelValue.form.singleDischargeQuantity"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="并发出杯数量" prop="concurrentDischargeQuantity">
            <el-input
              placeholder="请输入并发出杯数量"
              v-model="modelValue.form.concurrentDischargeQuantity"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="机器唯一ID" prop="machineUuid">
            <el-input
              placeholder="请输入机器唯一ID"
              v-model="modelValue.form.machineUuid"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="工位号" prop="station">
            <el-input
              placeholder="请输入工位号"
              v-model="modelValue.form.station"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="插槽ID" prop="slotId">
            <el-input
              placeholder="请输入插槽ID"
              v-model="modelValue.form.slotId"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="插槽编号" prop="slotNumber">
            <el-input
              placeholder="请输入插槽编号"
              v-model="modelValue.form.slotNumber"
              autocomplete="off"
            />
          </el-form-item>
        </el-form>
      </div>
      <template #footer v-if="!modelValue.form.disabled">
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="ensure"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { ElMessage, FormInstance } from 'element-plus'
import {
  addOrrDeviceOperatorStatus,
  updateOrrDeviceOperatorStatus,
} from '@/api/orr-device-operator-status.api'

const props = defineProps(['modelValue'])
const addEditRef = ref<FormInstance>()

/***
 * 确认弹框
 */
const ensure = () => {
  let form = props.modelValue.form
  let formData = {
    storeNumber: form.storeNumber,
    storeName: form.storeName,
    busiDate: form.busiDate,
    materialNumber: form.materialNumber,
    materialName: form.materialName,
    quantity: form.quantity,
    stableDischargeQuantity: form.stableDischargeQuantity,
    unStableDischargeQuantity: form.unStableDischargeQuantity,
    stableDischargePct: form.stableDischargePct,
    concurrentDischargeQuantityPct: form.concurrentDischargeQuantityPct,
    dischargeIntervalQuantity1: form.dischargeIntervalQuantity1,
    dischargeIntervalQuantity2: form.dischargeIntervalQuantity2,
    dischargeIntervalQuantity3: form.dischargeIntervalQuantity3,
    singleDischargeQuantity: form.singleDischargeQuantity,
    concurrentDischargeQuantity: form.concurrentDischargeQuantity,
    machineUuid: form.machineUuid,
    station: form.station,
    slotId: form.slotId,
    slotNumber: form.slotNumber,
  }

  if (!addEditRef.value) return
  addEditRef.value.validate((valid, fields) => {
    if (valid) {
      if (form.id) {
        updateOrrDeviceOperatorStatus({
          ...formData,
          id: form.id,
        })
          .then((res) => {
            cancel()
            ElMessage({
              message: props.modelValue.title + '修改成功',
              type: 'success',
            })
            if (props.modelValue.refreshDataList) {
              props.modelValue.refreshDataList()
            }
          })
          .catch((err) => {
            ElMessage({
              message: err.msg || err,
              type: 'error',
            })
          })
        return
      }

      addOrrDeviceOperatorStatus(formData)
        .then((res) => {
          cancel()
          ElMessage({
            message: props.modelValue.title + '新增成功',
            type: 'success',
          })
          if (props.modelValue.refreshDataList) {
            props.modelValue.refreshDataList()
          }
        })
        .catch((err) => {
          ElMessage({
            message: err.msg || err,
            type: 'error',
          })
        })
    }
  })
}

/***
 * 取消弹框
 */
const cancel = () => {
  props.modelValue.visible = false
}
</script>
<style lang="scss" scoped></style>
